<template>
  <div>
    <headers v-if="$slots.header">
      <slot name="header"></slot>
    </headers>

    <main>
      <slot>main</slot>
    </main>

    <footer>
      <slot name="footer"></slot>
    </footer>

    <div>
      <slot :name="Name"></slot>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'vue',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue';

const Name = ref('dynamicSlotName')
</script>
